/**
 * @class Ext.ux.DatetimePicker
 * @extends Ext.Component
 * Simple date picker class.
 * @constructor
 * Create a new DatetimePicker
 * @param {Object} config The config object
 */
Ext.ux.DatetimePicker = Ext.extend(Ext.Component, {
    /**
     * @cfg {String} todayText
     * The text to display on the button that selects the current date (defaults to "Today")
     */
    todayText : "Today",
    /**
     * @cfg {String} okText
     * The text to display on the ok button
     */
    okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
    /**
     * @cfg {String} cancelText
     * The text to display on the cancel button
     */
    cancelText : "Cancel",
    /**
     * @cfg {String} todayTip
     * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
     */
    todayTip : "{0} (Spacebar)",
    /**
     * @cfg {Date} minDate
     * Minimum allowable date (JavaScript date object, defaults to null)
     */
    minDate : null,
    /**
     * @cfg {Date} maxDate
     * Maximum allowable date (JavaScript date object, defaults to null)
     */
    maxDate : null,
    /**
     * @cfg {String} minText
     * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
     */
    minText : "This date is before the minimum date",
    /**
     * @cfg {String} maxText
     * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
     */
    maxText : "This date is after the maximum date",
    /**
     * @cfg {String} format
     * The default date format string which can be overriden for localization support.  The format must be
     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
     */
    format : "m/d/y",
    /**
     * @cfg {Array} disabledDays
     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
     */
    disabledDays : null,
    /**
     * @cfg {String} disabledDaysText
     * The tooltip to display when the date falls on a disabled day (defaults to "")
     */
    disabledDaysText : "",
    /**
     * @cfg {RegExp} disabledDatesRE
     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
     */
    disabledDatesRE : null,
    /**
     * @cfg {String} disabledDatesText
     * The tooltip text to display when the date falls on a disabled date (defaults to "")
     */
    disabledDatesText : "",
    /**
     * @cfg {Boolean} constrainToViewport
     * True to constrain the date picker to the viewport (defaults to true)
     */
    constrainToViewport : true,
    /**
     * @cfg {Array} monthNames
     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
     */
    monthNames : Date.monthNames,
    /**
     * @cfg {Array} dayNames
     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
     */
    dayNames : Date.dayNames,
    /**
     * @cfg {String} nextText
     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
     */
    nextText: 'Next Month (Control+Right)',
    /**
     * @cfg {String} prevText
     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
     */
    prevText: 'Previous Month (Control+Left)',
    /**
     * @cfg {String} monthYearText
     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
     */
    monthYearText: 'Choose a month (Control+Up/Down to move years)',
    /**
     * @cfg {Number} startDay
     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
     */
    startDay : 0,

    initComponent : function(){
        Ext.ux.DatetimePicker.superclass.initComponent.call(this);

        // this.value = this.value ?
        //          this.value.clearTime() : new Date().clearTime();
        this.value = this.value ?
                 this.value : new Date();

        this.addEvents(
            /**
             * @event select
             * Fires when a date is selected
             * @param {DatetimePicker} this
             * @param {Date} date The selected date
             */
            'select'
        );

        if(this.handler){
            this.on("select", this.handler,  this.scope || this);
        }

        this.initDisabledDays();
    },

    // private
    initDisabledDays : function(){
        if(!this.disabledDatesRE && this.disabledDates){
            var dd = this.disabledDates;
            var re = "(?:";
            for(var i = 0; i < dd.length; i++){
                re += dd[i];
                if(i != dd.length-1) re += "|";
            }
            this.disabledDatesRE = new RegExp(re + ")");
        }
    },

    /**
     * Sets the value of the date field
     * @param {Date} value The date to set
     */
    setValue : function(value){
        var old = this.value;
        this.value = value; // value.clearTime(true);
        if(this.el){
            this.update(this.value);
        }
    },

    /**
     * Gets the current selected value of the date field
     * @return {Date} The selected date
     */
    getValue : function(){
        return this.value;
    },

    // private
    focus : function(){
        if(this.el){
            this.update(this.activeDate);
        }
    },

    // private
    onRender : function(container, position){
        var m = [
             '<table cellspacing="0">',
                '<tr><td class="x-datetime-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-datetime-middle" align="center"></td><td class="x-datetime-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
                '<tr><td colspan="3"><table class="x-datetime-inner" cellspacing="0"><thead><tr>'];
        var dn = this.dayNames;
        for(var i = 0; i < 7; i++){
            var d = this.startDay+i;
            if(d > 6){
                d = d-7;
            }
            m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
        }
        m[m.length] = "</tr></thead><tbody><tr>";
        for(var i = 0; i < 42; i++) {
            if(i % 7 == 0 && i != 0){
                m[m.length] = "</tr><tr>";
            }
            m[m.length] = '<td><a href="#" hidefocus="on" class="x-datetime-date" tabIndex="1"><em><span></span></em></a></td>';
        }
        m[m.length] = '</tr></tbody></table></td></tr><tr><td colspan="3" class="x-datetime-bottom"></td></tr></table><div class="x-datetime-mp"></div>';

        // + 时间选择器
        m[m.length] = '<div class="x-datetime-tp"></div><div class="x-datetime-tp-pos"></div>';

        var el = document.createElement("div");
        el.className = "x-datetime-picker";
        el.style.width = '177px';
        el.innerHTML = m.join("");

        container.dom.insertBefore(el, position);

        this.el = Ext.get(el);
        this.eventEl = Ext.get(el.firstChild);

        new Ext.util.ClickRepeater(this.el.child("td.x-datetime-left a"), {
            handler: this.showPrevMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true
        });

        new Ext.util.ClickRepeater(this.el.child("td.x-datetime-right a"), {
            handler: this.showNextMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true 
        });

        this.eventEl.on("mousewheel", this.handleMouseWheel,  this);

        this.monthPicker = this.el.down('div.x-datetime-mp');
        this.monthPicker.enableDisplayMode('block');

        // +
        this.timePicker = this.el.down('div.x-datetime-tp');
        this.timePicker.enableDisplayMode('block'); 
        this.timePosPicker = this.el.down('div.x-datetime-tp-pos');
        this.timePosPicker.enableDisplayMode('block'); 

        var kn = new Ext.KeyNav(this.eventEl, {
            "left" : function(e){
                e.ctrlKey ?
                    this.showPrevMonth() :
                    this.update(this.activeDate.add("d", -1));
            },

            "right" : function(e){
                e.ctrlKey ?
                    this.showNextMonth() :
                    this.update(this.activeDate.add("d", 1));
            },

            "up" : function(e){ 
                e.ctrlKey ?
                    this.showNextYear() :
                    this.update(this.activeDate.add("d", -7));
            },

            "down" : function(e){
                e.ctrlKey ?
                    this.showPrevYear() :
                    this.update(this.activeDate.add("d", 7));
            },

            "pageUp" : function(e){
                this.showNextMonth();
            },

            "pageDown" : function(e){
                this.showPrevMonth();
            },

            "enter" : function(e){
                e.stopPropagation();
                return true;
            },

            scope : this
        });

        // - 日期点击事件
        // this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-datetime-date"});
        this.eventEl.on("click", this.handleDateClickWithoutPick,  this, {delegate: "a.x-datetime-date"});

        this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);

        this.el.unselectable();
        
        this.cells = this.el.select("table.x-datetime-inner tbody td");
        this.textNodes = this.el.query("table.x-datetime-inner tbody span");

        this.mbtn = new Ext.Button({
            text: "&#160;",
            tooltip: this.monthYearText,
            renderTo: this.el.child("td.x-datetime-middle", true)
        });

        this.mbtn.on('click', this.showMonthPicker, this);
        this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");

        var today = (new Date()).dateFormat(this.format);

        var x_datetime_bottom_el = this.el.child("td.x-datetime-bottom", true);
        
        this.ensureBtn = new Ext.Button({
            renderTo: x_datetime_bottom_el,
            text: "确定",
            // tooltip: "确定",
            handler: this.ensureHandler,
            scope: this
        });

        this.todayBtn = new Ext.Button({
            renderTo: x_datetime_bottom_el,
            text: String.format(this.todayText, today),
            // tooltip: String.format(this.todayTip, today),
            handler: this.selectToday,
            scope: this
        });


        // 有时间则使用时间 没有使用当前时间 
        this.timeField = new Ext.form.TextField({
            renderTo: x_datetime_bottom_el,
            readOnly:true,
            width: 70
        });

        var self = this;
        this.timeField.getEl().dom.addEventListener('click',function(e){
            e.stopPropagation();  
            self.showTimePicker();
        });
        
        
        if(Ext.isIE){
            this.el.repaint();
        } 
        
        this.update(this.value);
    },

    // +
    ensureHandler : function(){
        // this.setValue(this.activeDate);  
        this.fireEvent("select", this, this.activeDate || this.value);
    },

    // +
    showTimePicker : function(){
        this.createTimePicker();
        var size = this.el.getSize();
        size.width = size.width-2;
        size.height = size.height-1;
        this.timePicker.setSize(size);
        var table = this.timePicker.child('table');
        table.setSize(size);  
 
        // 设置时间
        var h = Ext.select('.x-datetime-tp-hours');
        var m = Ext.select('.x-datetime-tp-minutes');
        var s = Ext.select('.x-datetime-tp-seconds');  

        this.timePosPicker.show();
        var self = this;
        this.timePicker.slideIn('b', {duration:.2,callback:function(){
            h.scrollTo('t',19*self.tpHours,false);
            m.scrollTo('t',19*self.tpMinutes,false);
            s.scrollTo('t',19*self.tpSeconds,false);
        }});
        
    },

    // +
    createTimePicker : function(){
        if(!this.timePicker.dom.firstChild){
            var buf = ['<table border="0" cellspacing="0">'];
            // 三列
            buf.push('<tr>');
            buf.push('<td><div class="x-datetime-tp-tg x-datetime-tp-hours">');
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            for(var i=0 ; i < 24 ; i++ ){ 
                buf.push('<div class="x-datetime-tp-unit">');
                buf.push(i);
                buf.push('</div>');
            }
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            buf.push('</div></td>');

            buf.push('<td><div class="x-datetime-tp-tg x-datetime-tp-minutes">');
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            for(var i=0 ; i < 60 ; i++ ){
                buf.push('<div class="x-datetime-tp-unit">');
                buf.push(i);
                buf.push('</div>'); 
            } 
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            buf.push('</div></td>');

            buf.push('<td><div class="x-datetime-tp-tg x-datetime-tp-seconds">');
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            for(var i=0 ; i < 60 ; i++ ){
                buf.push('<div class="x-datetime-tp-unit">');
                buf.push(i);
                buf.push('</div>'); 
            }
            for( var j = 0 ; j < 4 ; j++){
                buf.push('<div class="x-datetime-tp-unit">&nbsp;</div>');
            }
            buf.push('</div></td>');

            buf.push('</tr>');
            buf.push(
                '<tr class="x-datetime-tp-btns"><td colspan="4"><button type="button" class="x-datetime-tp-ok">',
                    this.okText,
                    '</button><button type="button" class="x-datetime-tp-cancel">',
                    this.cancelText,
                    '</button></td></tr>',
                '</table>'
            ); 
            this.timePicker.update(buf.join(''));
            this.timePicker.on('click', this.onMonthClick, this);
            this.timePicker.on('dblclick', this.onMonthDblClick, this); 
            // 添加鼠标滚动事件
            this.timePicker.on('mousewheel',this.handleTimePickerMouseWheel,this);
        }
    },

    createMonthPicker : function(){
        if(!this.monthPicker.dom.firstChild){
            var buf = ['<table border="0" cellspacing="0">'];
            for(var i = 0; i < 6; i++){
                buf.push(
                    '<tr><td class="x-datetime-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
                    '<td class="x-datetime-mp-month x-datetime-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
                    i == 0 ?
                    '<td class="x-datetime-mp-ybtn" align="center"><a class="x-datetime-mp-prev"></a></td><td class="x-datetime-mp-ybtn" align="center"><a class="x-datetime-mp-next"></a></td></tr>' :
                    '<td class="x-datetime-mp-year"><a href="#"></a></td><td class="x-datetime-mp-year"><a href="#"></a></td></tr>'
                );
            }
            buf.push(
                '<tr class="x-datetime-mp-btns"><td colspan="4"><button type="button" class="x-datetime-mp-ok">',
                    this.okText,
                    '</button><button type="button" class="x-datetime-mp-cancel">',
                    this.cancelText,
                    '</button></td></tr>',
                '</table>'
            );
            this.monthPicker.update(buf.join(''));
            this.monthPicker.on('click', this.onMonthClick, this);
            this.monthPicker.on('dblclick', this.onMonthDblClick, this);

            this.mpMonths = this.monthPicker.select('td.x-datetime-mp-month');
            this.mpYears = this.monthPicker.select('td.x-datetime-mp-year');

            this.mpMonths.each(function(m, a, i){
                i += 1;
                if((i%2) == 0){
                    m.dom.xmonth = 5 + Math.round(i * .5);
                }else{
                    m.dom.xmonth = Math.round((i-1) * .5);
                }
            });
        }
    },

    showMonthPicker : function(){
        this.createMonthPicker();
        var size = this.el.getSize();
        size.width = size.width-2;
        size.height = size.height-1;
        this.monthPicker.setSize(size); 
        this.monthPicker.child('table').setSize(size);

        this.mpSelMonth = (this.activeDate || this.value).getMonth();
        this.updateMPMonth(this.mpSelMonth);
        this.mpSelYear = (this.activeDate || this.value).getFullYear();
        this.updateMPYear(this.mpSelYear);

        this.monthPicker.slideIn('t', {duration:.2});
    },

    updateMPYear : function(y){ 
        this.mpyear = y;
        var ys = this.mpYears.elements;
        for(var i = 1; i <= 10; i++){
            var td = ys[i-1], y2;
            if((i%2) == 0){
                y2 = y + Math.round(i * .5);
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }else{
                y2 = y - (5-Math.round(i * .5));
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }
            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-datetime-mp-sel');
        }
    },

    updateMPMonth : function(sm){
        this.mpMonths.each(function(m, a, i){
            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-datetime-mp-sel');
        });
    },

    selectMPMonth: function(m){
        
    },

    onMonthClick : function(e, t){
        e.stopEvent(); 
        var el = new Ext.Element(t), pn;
        if(el.is('button.x-datetime-mp-cancel')){
            this.hideMonthPicker();
        }
        else if(el.is('button.x-datetime-mp-ok')){
            var date = (this.activeDate || this.value);
            this.update(new Date(this.mpSelYear, this.mpSelMonth, date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()));
            this.hideMonthPicker();
        }
        else if(pn = el.up('td.x-datetime-mp-month', 2)){
            this.mpMonths.removeClass('x-datetime-mp-sel');
            pn.addClass('x-datetime-mp-sel');
            this.mpSelMonth = pn.dom.xmonth;
        }
        else if(pn = el.up('td.x-datetime-mp-year', 2)){
            this.mpYears.removeClass('x-datetime-mp-sel');
            pn.addClass('x-datetime-mp-sel');
            this.mpSelYear = pn.dom.xyear;
        }
        else if(el.is('a.x-datetime-mp-prev')){
            this.updateMPYear(this.mpyear-10);
        }
        else if(el.is('a.x-datetime-mp-next')){
            this.updateMPYear(this.mpyear+10);
        }
        else if(el.is('button.x-datetime-tp-cancel')){
            this.hideTimePicker(); 
        }
        else if(el.is('button.x-datetime-tp-ok')){
            if(this.timeField){
                var timeStr = this.getTimeStr(this.tpHours)+":"+this.getTimeStr(this.tpMinutes)+":"+this.getTimeStr(this.tpSeconds);
                this.timeField.setValue(timeStr); 
                var datetimeStr = this.value.dateFormat('Y-m-d '+timeStr);
                this.value = Date.parseDate(datetimeStr,'Y-m-d H:i:s');  
                this.update(this.value);
            }
            this.hideTimePicker(); 
        }
    },

    getTimeStr : function(str){
        if(str<=9) return '0'+str;
        else return str;
    },

    onMonthDblClick : function(e, t){
        e.stopEvent();
        var el = new Ext.Element(t), pn;
        if(pn = el.up('td.x-datetime-mp-month', 2)){
            this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
            this.hideMonthPicker();
        }
        else if(pn = el.up('td.x-datetime-mp-year', 2)){
            this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
            this.hideMonthPicker();
        }
    },

    hideTimePicker : function(disableAnim){
        if(this.timePicker){
            this.timePosPicker.hide();
            if(disableAnim === true){
                this.timePicker.hide();
            }else{
                this.timePicker.slideOut('b', {duration:.2});
            }
        }
    },

    hideMonthPicker : function(disableAnim){
        if(this.monthPicker){
            if(disableAnim === true){
                this.monthPicker.hide();
            }else{
                this.monthPicker.slideOut('t', {duration:.2});
            }
        }
    },

    // private
    showPrevMonth : function(e){
        this.update(this.activeDate.add("mo", -1));
    },

    // private
    showNextMonth : function(e){
        this.update(this.activeDate.add("mo", 1));
    },

    // private
    showPrevYear : function(){
        this.update(this.activeDate.add("y", -1));
    },

    // private
    showNextYear : function(){
        this.update(this.activeDate.add("y", 1));
    },

    // private
    handleMouseWheel : function(e){
        var delta = e.getWheelDelta();
        if(delta > 0){
            this.showPrevMonth();
            e.stopEvent();
        } else if(delta < 0){
            this.showNextMonth();
            e.stopEvent();
        }
    },

    // +

    handleTimePickerMouseWheel:function(e,t){
        var delta = e.getWheelDelta();  
        var node = Ext.fly(t.parentNode);
        if(delta > 0){
            var number = 0;
            if(node.hasClass('x-datetime-tp-hours')){
                this.tpHours ++; 
                if(this.tpHours >= 23) this.tpHours = 23;
                number = this.tpHours;
            }else if(node.hasClass('x-datetime-tp-minutes')){
                this.tpMinutes ++;
                if(this.tpMinutes >= 59 ) this.tpMinutes = 59;
                number = this.tpMinutes;
            }else if(node.hasClass('x-datetime-tp-seconds')){
                this.tpSeconds ++;
                if(this.tpSeconds >= 59 ) this.tpSeconds = 59;
                number = this.tpSeconds;
            }
            this.timePickerScrollUp(node,number);
            e.stopEvent();
        } else if(delta < 0){ 
            var number = 0;
            if(node.hasClass('x-datetime-tp-hours')){
                this.tpHours --; 
                if(this.tpHours <= 0) this.tpHours = 0;
                number = this.tpHours;
            }else if(node.hasClass('x-datetime-tp-minutes')){
                this.tpMinutes --;
                if(this.tpMinutes <= 0 ) this.tpMinutes = 0;
                number = this.tpMinutes;
            }else if(node.hasClass('x-datetime-tp-seconds')){
                this.tpSeconds --;
                if(this.tpSeconds <= 0 ) this.tpSeconds = 0;
                number = this.tpSeconds;
            }
            this.timePickerScrollDown(node,number);
            e.stopEvent();
        }
    },
    // + 
    timePickerScrollUp:function(node,number){ 
        node.scrollTo('b',19*number,true);
    },

    timePickerScrollDown:function(node,number){
        node.scrollTo('t',19*number,true);
    },

    // + private 
    handleDateClickWithoutPick : function(e, tt){
        e.stopEvent();
        if(tt.dateValue && !Ext.fly(tt.parentNode).hasClass("x-datetime-disabled")){  
            var timeStr = new Date(tt.dateValue).dateFormat('Y-m-d')+' '+this.timeField.getValue(); 
            this.setValue(Date.parseDate(timeStr,'Y-m-d H:i:s')); 
        }
    },

    // private
    handleDateClick : function(e, t){
        e.stopEvent();
        if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-datetime-disabled")){
            this.setValue(new Date(t.dateValue));
            this.fireEvent("select", this, this.value);
        }
    },

    // private
    selectToday : function(){
        // this.setValue(new Date().clearTime());
        // 更新当前时间 
        this.setValue(new Date());
        this.fireEvent("select", this, this.value);
    },

    updateTimeField:function(){
        var date = this.value;
        if(this.timeField){ 
            // 设置时分秒的值  
            if(!this.selFlag){
                this.tpHours = date.dateFormat('H');
                this.tpMinutes = date.dateFormat('i');
                this.tpSeconds =  date.dateFormat('s');
                this.selFlag = true;
            } 
            this.timeField.setValue(date.dateFormat('H:i:s'));
        }
    },

    // private
    update : function(date){    
        var vd = this.activeDate;
        this.activeDate = date;  
        this.updateTimeField(); 
        // 选择当前日期
        if(vd && this.el){
            // var t = date.getTime();
            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
                this.cells.removeClass("x-datetime-selected");
                this.cells.each(function(c){
                   var tagDate = new Date(c.dom.firstChild.dateValue);
                   if(tagDate.getDate() == date.getDate() 
                      && tagDate.getFullYear() == date.getFullYear() 
                      && tagDate.getMonth() == date.getMonth() ){
                       c.addClass("x-datetime-selected");
                       setTimeout(function(){ 
                            try{c.dom.firstChild.focus();}catch(e){}
                       }, 50);
                       return false;
                   }
                });
                return;
            }
        }
        // 更新月份
        var days = date.getDaysInMonth(); // 月内有多少天
        var firstOfMonth = date.getFirstDateOfMonth(); // 月的第一天日期
        var startingPos = firstOfMonth.getDay()-this.startDay; // 位移

        if(startingPos <= this.startDay){
            startingPos += 7;
        }

        var pm = date.add("mo", -1); // 减一个月
        var prevStart = pm.getDaysInMonth()-startingPos;

        var cells = this.cells.elements;
        var textEls = this.textNodes;
        days += startingPos;
 
        // 将所有转换成数字 可以加快速度
        var day = 86400000;
        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
        var today = new Date().clearTime().getTime(); // 今天
        var sel = date.clearTime(true).getTime(); // 设置时间
        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
        var ddMatch = this.disabledDatesRE;
        var ddText = this.disabledDatesText;
        var ddays = this.disabledDays ? this.disabledDays.join("") : false;
        var ddaysText = this.disabledDaysText;
        var format = this.format;

        var setCellClass = function(cal, cell){
            cell.title = "";
            var t = d.getTime();
            cell.firstChild.dateValue = t;
            if(t == today){
                cell.className += " x-datetime-today";
                cell.title = cal.todayText;
            }
            if(t == sel){
                cell.className += " x-datetime-selected";
                setTimeout(function(){
                    try{cell.firstChild.focus();}catch(e){}
                }, 50);
            }
            // disabling
            if(t < min) {
                cell.className = " x-datetime-disabled";
                cell.title = cal.minText;
                return;
            }
            if(t > max) {
                cell.className = " x-datetime-disabled";
                cell.title = cal.maxText;
                return;
            }
            if(ddays){
                if(ddays.indexOf(d.getDay()) != -1){
                    cell.title = ddaysText;
                    cell.className = " x-datetime-disabled";
                }
            }
            if(ddMatch && format){
                var fvalue = d.dateFormat(format);
                if(ddMatch.test(fvalue)){
                    cell.title = ddText.replace("%0", fvalue);
                    cell.className = " x-datetime-disabled";
                }
            }
        };

        var i = 0;
        for(; i < startingPos; i++) {
            textEls[i].innerHTML = (++prevStart);
            d.setDate(d.getDate()+1);
            cells[i].className = "x-datetime-prevday";
            setCellClass(this, cells[i]);
        }
        for(; i < days; i++){
            intDay = i - startingPos + 1;
            textEls[i].innerHTML = (intDay);
            d.setDate(d.getDate()+1);
            cells[i].className = "x-datetime-active";
            setCellClass(this, cells[i]);
        }
        var extraDays = 0;
        for(; i < 42; i++) {
             textEls[i].innerHTML = (++extraDays);
             d.setDate(d.getDate()+1);
             cells[i].className = "x-datetime-nextday";
             setCellClass(this, cells[i]);
        }
        // 设置标题年月
        this.mbtn.setText(date.getFullYear() + " " + this.monthNames[date.getMonth()]);

        if(!this.internalRender){ 
            var main = this.el.dom.firstChild;
            var w = main.offsetWidth; 
            this.el.setWidth(w + this.el.getBorderWidth("lr"));
            Ext.fly(main).setWidth(w);
            this.internalRender = true;
            // opera does not respect the auto grow header center column
            // then, after it gets a width opera refuses to recalculate
            // without a second pass
            if(Ext.isOpera && !this.secondPass){
                main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
                this.secondPass = true;
                this.update.defer(10, this, [date]);
            }
        }
    },

    // private
    beforeDestroy : function() {
        this.mbtn.destroy();
        this.todayBtn.destroy();
        this.ensureBtn.destroy(); 
    }

    /**
     * @cfg {String} autoEl @hide
     */
});
Ext.reg('datetimepicker', Ext.ux.DatetimePicker);